<template>
    <div class="console-page common-response">
        <div style="padding-bottom: 10px;height: 33px;">
            <el-input style="height: 100%;width: 500px;" v-model="searchKey" @keyup.enter="search" />
            <el-button type="primary" style="height: 100%;margin-left: 10px;font-family: inherit;"
                @click="search">搜索</el-button>
        </div>
        <el-scrollbar style="height: calc(100% - 43px);">
            <div v-waterfall>
                <span v-for="item in Object.keys(response)" class="response-item">
                    <span class="no-wrap response-name">
                        {{ item }}
                    </span>
                    <tooltip class="response-description no-wrap" v-model="response[item]" showTips dblcopy />
                </span>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import router from '@/router'
import instance from "@/pinia"

const { mainStore } = instance
let response = $ref({})
let searchKey = $ref("")

const search = () => {
    response = mainStore.getUrlMap[router.currentRoute.value.path]
    if (searchKey) {
        const temp = {}
        for (let key in response) {
            if (key.includes(searchKey) || response[key].toString().includes(searchKey)) {
                temp[key] = response[key]
            }
        }
        response = temp
    }
}

onMounted(() => {
    response = mainStore.getUrlMap[router.currentRoute.value.path]
})

</script>

<style>
.common-response {
    padding: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.common-response .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: var(--el-descriptions-item-bordered-label-background) !important;
}

.common-response .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    border: 1px solid #e3e3e3;
}

.common-response .response-name {
    min-width: fit-content;
    padding-left: 5px;
    text-align: right;
}

.common-response .response-description {
    width: 100%;
    box-shadow: none;
}

.common-response .response-item {
    border: 1px solid rgb(0, 93, 255, .3);
    padding: 5px;
    border-radius: 3px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    display: inline-flex;
}
</style>
